<template>
    <div style="overflow: hidden;">
        <div class="statistic-header">
            <el-row>
                <el-col :span="6">
                    <el-statistic :value="statisticData.totalOngoingActivityNum">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">
                            市场活动
                        </div>
                    </template>
                    <template #suffix>/{{ statisticData.totalActivityNum }}</template>
                    </el-statistic>
                </el-col>
           
                <el-col :span="6">
                    <el-statistic title="线索总数" :value="statisticData.totalClueNum" />
                </el-col>
                <el-col :span="6">
                    <el-statistic title="客户总数" :value="statisticData.totalCustomer">
                    </el-statistic>
                </el-col>
                <el-col :span="6">
                    <el-statistic :value="statisticData.dealMoney">
                    <template #title>
                        <div style="display: inline-flex; align-items: center">
                            交易总额
                        </div>
                        
                    </template>
                    <template #suffix>/{{ statisticData.allMoney }}</template>
                    </el-statistic>
                </el-col>
            </el-row>
        </div>
        <div class="echarts">
            <div id="funnel-chart">
            </div>
            <div id="pie-chart">
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup name="StatisticView">
import { ref, reactive, onMounted } from 'vue';
import { baseService } from '@/utils/httpReqest';
import { ElMessage } from 'element-plus';
import { StatisticData } from '@/hooks/statisticData';
import * as echarts from 'echarts';
let statisticData = ref<StatisticData>(new StatisticData());


let loadStatisticData = () => {
    baseService.doGet("/statistic/statisticData").then((res: any) => {
        if (res.code == 200) {
            statisticData.value = res.data
        } else {
            ElMessage.error("获取概览信息失败")
        }
    })
}
let loadFunnelChart = () => {
    baseService.doGet("/statistic/saleFunnelData").then((res: any) => {
        if (res.code == 200) {
            let legendData: any[] = [];
            for (const key in res.data) {
                legendData.push(res.data[key]['name'])
            }
            var chartDom = document.getElementById("funnel-chart");
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '销售漏斗图',
                    bottom: "20px",
                    left: "center"
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}%'
                },
                // toolbox: {
                //     feature: {
                //         dataView: { readOnly: false },
                //         restore: {},
                //         saveAsImage: {}
                //     }
                // },
                legend: {
                    data: legendData,
                
                },

                series: [
                    {
                        name: 'Funnel',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: res.data
                    }
                ]
            };
            option && myChart.setOption(option);
        } else {
            ElMessage.error("获取销售漏斗图数据出错")
        }
    })


}
let loadPieChart = () => {
    baseService.doGet("/statistic/cluePieData").then((res: any) => {
        if (res.code == 200) {
            var chartDom = document.getElementById('pie-chart')!;
            var myChart = echarts.init(chartDom);
            var option = {
                title: {
                    text: '线索来源统计',
                    bottom: '10px',
                    left:"center"
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'center',
                  
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: res.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        } else {
            ElMessage.error("获取销售漏斗图数据出错")
        }
    })


}
onMounted(() => {
    loadStatisticData();
    loadFunnelChart();
    loadPieChart();
})
</script>
<style scoped>
.statistic-header {
    text-align: center;
    margin-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.echarts {
    margin: 20px;
    display: flex;
  
}

#funnel-chart {
    width: 50%;
    height: 400px;

}

#pie-chart {
    width: 50%;
    height: 400px;
  
}
</style>